<template>
  <div>CustomRef的使用</div>
  <input type="text" v-model="keyword">
  <p>{{keyword}}</p>
</template>

<script>
import {customRef, defineComponent,ref} from 'vue'
function useDeBouncedRef(value,delay=200) {
  let timeOutId
  return customRef((track,trigger)=>{
    return {
      get(){
        track()
        return value
      },
      set(newValue){
        clearTimeout(timeOutId)
        timeOutId = setTimeout(()=>{
          value = newValue
          trigger()
        },delay)
      }
    }
  })
}
export default defineComponent({
  name: 'App',
  setup() {
    // const keyword = ref('abc')
    const keyword = useDeBouncedRef('abc',500)
    return {
      keyword
    }
  }
})
</script>

<style lang="less" scoped>

</style>
